<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- 步骤1：引入Vue.js、Element Plus、Axios、Mock.js、api.js、app.js、style.css -->
    <!-- import Vue -->
    <script src="https://unpkg.com/vue"></script>

    <!-- import Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import Element Plus JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>

    <!-- import Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- import Mock.js -->
    <script src="http://mockjs.com/dist/mock.js"></script>

    <!-- 步骤2：封装前后端交互接口  -->
    <script type="module" src="./js/api.js"></script>
    <!-- 步骤3：完成api.js -->
    <!-- 步骤4：通过组件方式构建主应用，引入app组件 -->
    <script type="module" src="./js/app.js"></script>
    <!-- 步骤9：完成app.js -->
    <!-- 步骤8：引入样式文件 -->
    <link rel="stylesheet" href="css/style.css">
    <title>东软饭店</title>
  </head>
  <body>
    <div id="app">
      <!-- 步骤4：通过组件方式构建主应用，引入app组件 -->
      <!-- 知识点：Vue3中通过<'注册组件' />放置组件 -->
      <Myapp />
    </div>
  </body>
  
  <!-- 知识点：通过 <script type="module"> 导入模块化脚本 -->
  <script type="module">
    // 步骤4：通过组件方式构建主应用，引入app组件
    import Myapp from './js/app.js';
    // 步骤3：引入api.js
    import api from './js/api.js';
    import './js/myMock.js';
    // 步骤6：创建Vue.js根组件
    const App = {
      // 步骤6：创建data数据(变量)
      // 知识点：Vue3 在data()方法中定义数据
      data() {
        return {
          message: "Hello！欢迎来到东软饭店！",
        }
      },

      // 步骤6：注册主组件(组件名：Myapp)
      // 知识点：Vue3 在components选项中注册组件
      components: {
        Myapp
      }
    };

    // 步骤6：创建Vue.js根组件                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
    // 知识点：Vue3 通过 Vue.createApp() 方法创建根组件
    const app = Vue.createApp(App);

    // 步骤7：使用Element Plus UI库
    // 知识点：Vue3 通过 app.use() 方法使用插件
    app.use(ElementPlus);

    // 步骤6：挂载Vue.js根组件
    // 知识点：Vue3 通过 app.mount() 方法挂载根组件
    app.mount("#app");
  </script>
</html>